﻿<UserControl x:Class="Progress.CircularProgressBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="120" Width="120" Background="Transparent">
    <Grid x:Name="LayoutRoot" Background="Transparent" 
          HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="SpinnerScale" ScaleX="1.0" ScaleY="1.0" />
        </Grid.RenderTransform>
        <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" 
                VerticalAlignment="Center" Width="120" Height="120" >
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" 
                     Canvas.Top="9.76358" Stretch="Fill" Fill="Red" Opacity="1.0"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" 
                     Canvas.Top="29.9581" Stretch="Fill" Fill="Orange" Opacity="0.9"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" 
                     Canvas.Top="57.9341" Stretch="Fill" Fill="Orange" Opacity="0.8"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" 
                     Canvas.Top="83.3163" Stretch="Fill" Fill="Orange" Opacity="0.7"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" 
                     Canvas.Top="98.138" Stretch="Fill" Fill="Orange" Opacity="0.6"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" 
                     Canvas.Top="96.8411" Stretch="Fill" Fill="Orange" Opacity="0.5"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" 
                     Canvas.Top="81.2783" Stretch="Fill" Fill="Orange" Opacity="0.4"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" 
                     Canvas.Top="54.414" Stretch="Fill" Fill="Orange" Opacity="0.3"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" 
                     Canvas.Top="26.9938" Stretch="Fill" Fill="Orange" Opacity="0.2"/>
            <Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" 
                     Canvas.Top="0.5" Stretch="Fill" Fill="Orange" Opacity="0.1"/>
            <Canvas.RenderTransform>
                <RotateTransform x:Name="SpinnerRotate" Angle="0" />
            </Canvas.RenderTransform>
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="ContentControl.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 
                                 Storyboard.TargetProperty="(RotateTransform.Angle)" 
                                 From="0" To="360" Duration="0:0:01" 
                                 RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
        </Canvas>
    </Grid>
</UserControl>
